<template>
  <van-field v-model="result" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
    @click="showArea = true" />
  <van-popup v-model:show="showArea" position="bottom">
    <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
  </van-popup>
</template>

<script setup>
import { ref } from 'vue';
import { areaList } from '@vant/area-data';

const result = ref('');
const showArea = ref(false);
const onConfirm = ({ selectedOptions }) => {
  showArea.value = false;
  result.value = selectedOptions.map((item) => item.text).join('/');
};
</script>

<style lang="scss" scoped></style>